<template>
<div class="city-wrapper" v-if="isShowList">
  <div class="city-title">最近搜索记录：</div>
  <ul class="city-tab">
    <li 
      v-for="tab in cityTabs"
      :key="tab.nameEn"
      :class="{active: currentName === tab.nameEn}"
      @click="currentName = tab.nameEn"
    >{{tab.nameCn}}</li>
  </ul>
  <ul class="hot-list" v-if="currentName === 'Hot'">
    <li 
      v-for="city in citiesList"
      :key="city.cityId"
      :class="{active: currentCity === city.cityNameCn}"
      @click="cityChange(city.cityNameCn)"
    >
    {{city.cityNameCn}}
    </li>
  </ul>
  <ul class="hotel-list" v-else>
    <li
      v-for="(citys, key) in citiesList"
      :key="key"
    >
    <span>{{key}}</span>
    <ul class="hotel-city">
      <li
        v-for="city in citys"
        :key="city.cityId"
        :class="{active: currentCity === city.cityNameCn}"
        @click="cityChange(city.cityNameCn)"
      >{{city.cityNameCn}}</li>
    </ul>
    </li>
  </ul>
</div>
</template>
<script>
export default {
  name: "CityList",
  props: {
    hotCityList: Array,
    hotelCityList: Array,
    isLoadCityList: Boolean
  },
  data() {
    return {
      currentName: "Hot",
      currentCity: "",
      cityTabs: [
        {
          nameCn: "热门",
          nameEn: "Hot"
        },
        {
          nameCn: "ABCDEF",
          nameEn: "ABCDEF"
        },
        {
          nameCn: "GHJK",
          nameEn: "GHJK"
        },
        {
          nameCn: "LMNPQ",
          nameEn: "LMNPQ"
        },
        {
          nameCn: "RSTW",
          nameEn: "RSTW"
        },
        {
          nameCn: "XYZ",
          nameEn: "XYZ"
        }
      ]
    };
  },
  methods: {
    cityChange(cityName) {
      this.currentCity = cityName;
      this.$emit("city-change", cityName);
      this.isShowList = false;
    }
  },
  computed: {
    isShowList: {
      get() {
        return this.isLoadCityList;
      },
      set() {

      }
    },
    citiesList() {
      let cityList = {};
      if (this.currentName === "Hot") {
        return this.hotCityList;
      }
      this.currentName.split("").forEach(letter => {
        cityList[letter] = [];
        this.hotelCityList.forEach(city => {
          let letterEn = city.cityNameEn.slice(0, 1).toUpperCase();
          if (letter === letterEn) {
            cityList[letter].push(city);
          }
        });
      });
      return cityList;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/styles/varibles.scss";
.city-wrapper {
  padding: 0.8em;
  width: 32em;
  border: 1px solid #ccc;
  font-size: 0.8rem;
  .city-tab {
    padding-left: 0.8em;
    padding-top: 0.3em;
    margin-top: 1em;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ccc;
    &:after {
      clear: both;
      content: "";
      display: block;
      height: 0;
    }
    li {
      margin: 0 0.5em;
      padding: 0.6em;
      float: left;
      cursor: pointer;
    }
    .active {
      margin-bottom: -1px;
      background-color: #fff;
      border: #ccc 1px solid;
      border-bottom: #fff 1px solid;
    }
  }
  .hot-list {
    margin-top: 0.5em;
    overflow: hidden;
    li {
      margin-right: 1em;
      padding: 0.5em 1em;
      float: left;
      cursor: pointer;
      &:hover {
        background-color: $blueColor;
        color: #fff;
      }
    }
    .active {
      background-color: $blueColor;
      color: #fff;
    }
  }
  .hotel-list {
    > li {
      border-bottom: 1px dashed #ccc;
      span {
        padding: 0.5em 0;
        float: left;
      }
    }
  }
  .hotel-city {
    overflow: hidden;
    li {
      padding: 0.5em 1em;
      float: left;
      cursor: pointer;
      &:hover {
        background-color: $blueColor;
        color: #fff;
      }
    }
    .active {
      background-color: $blueColor;
      color: #fff;
    }
  }
}
</style>
